/*
 * @Author: wuhao930406 1148547900@qq.com
 * @Date: 2023-10-08 15:39:45
 * @LastEditors: wuhao930406 1148547900@qq.com
 * @LastEditTime: 2023-10-11 16:39:52
 * @FilePath: /legion-iot/src/pages/dashboard/components/Micro.jsx
 * @Description:
 *
 * Copyright (c) 2023 by ${git_name_email}, All Rights Reserved.
 */
import React, { useState, useEffect } from "react";
import ReactECharts from "echarts-for-react";
import * as echarts from "echarts";
import { theme, Progress } from "antd";

const colors = {
  0: { "0%": "#ADD100", "100%": "#7B920A" },
  1: { "0%": "#FBD3E9", "100%": "#BB377D" },
  2: { "0%": "#606c88", "100%": "#3f4c6b" },
  3: { "0%": "#C9FFBF", "100%": "#FFAFBD" },
  4: { "0%": "#649173", "100%": "#DBD5A4" },
  5: { "0%": "#B993D6", "100%": "#8CA6DB" },
};

function Micro({ data }) {

  let ayData = data?.px.a?.filter((it, i) => i < 8)??[];

  const {
    token: {
      colorBgContainer,
      colorTextBase,
      colorBgSecondary,
      colorPrimary,
      colorBgThird,
      colorBorder,
    },
  } = theme.useToken();

  return (
    <div
      style={{
        flex: 1,
        overflow: "hidden",
        display: "grid",
        gridTemplateColumns: "repeat(4, 1fr)",
        gap: 10,
        padding: "10px 0",
      }}
    >
      {ayData?.map((it, i) => (
        <div
          key={i}
          style={{ border: `1px solid ${colorBgThird}`, borderRadius: 6, display:"flex", flexDirection:"column",justifyContent:"center",gap:4 }}
        >
          <div className="center" style={{alignItems:"flex-end"}}>
            <div
              className="center"
              style={{
                backgroundColor: colorPrimary,
                color: "#fff",
                width: 20,
                height: 20,
                borderRadius: 4,
                fontSize: 12,
              }}
            >
              {i + 1}F
            </div>
            <span style={{fontSize:12}}>
            总站
            </span>
          </div>
          <div className="center" style={{alignItems:"flex-start"}}>
            <span>
              <b>{it>10?it-10>10?it-20>10?it-30:it-20:it-10:it}</b>
              人
            </span>
          </div>
        </div>
      ))}
    </div>
  );
}

export default Micro;
